<template>
	<div class="view">
		<!-- <van-tabs :active="active" @change="change"> -->
		<!-- <van-tab title="医院"> -->
		<div class="hospitalList" v-if="!active">
			<div @click="to('/pages/IndexPages/hospitalDetails/main?id=' + item.id)" class="item"
				v-for="(item, index) in list" :key="index">
				<div>
					<span>{{ item.hospitalName }}</span>
					<span>{{ item.hospitalGrade }}</span>
					<span>{{ item.hospitalType }}</span>
				</div>
				<div>{{ item.hospitalAddress }}</div>
				<div>
					<p v-for="(val, k) in item.labelList" :key="k">{{ val }}</p>
				</div>
			</div>
		</div>
		<!-- </van-tab> -->
		<!-- <van-tab title="医生"> -->
		<div class="doctorlist" v-else>
			<view class="list" v-if="list.length != 0">
				<doctor-item v-for="(item, index) in list" :key="index" :item="item"></doctor-item>
			</view>
		</div>
		<!-- </van-tab> -->
		<!-- </van-tabs> -->
	</div>
</template>

<script>
	// import { getMyFocusList } from "@/apis/request";
	import {
		getMyFocusList
	} from "../../../apis/request.js";
	import DoctorItem from '@/components/doctor-item/doctor-item.vue';

	export default {
		data() {
			return {
				active: 0,
				list: [],
				finished: false,
				pageNo: 1,
			};
		},
		onLoad(options) {
			this.active = Number(options.type)
			let title = ''
			if (this.active === 0) {
				title = '关注的医院'
			} else {
				title = '关注的医生'
			}
			wx.setNavigationBarTitle({
				title: title
			})
			this.getlist();
		},
		methods: {
			change(e) {
				if (this.active === e.mp.detail.index) return
				this.active = e.mp.detail.index;
				this.list = [];
				this.pageNo = 1;
				this.finished = false;
				this.getlist();
			},
			to(url) {
				uni.navigateTo({
					url,
				});
			},
			async getlist() {
				if (!this.finished) {
					const data = await getMyFocusList({
						pageNo: this.pageNo++,
						pageSize: 10,
						attentionType: this.active,
					});
					if (data.records.length == 0) {
						this.finished = true;
					}
					this.list.push(...data.records);
					wx.stopPullDownRefresh();
				}
			},
		},
		onReachBottom() {
			this.getlist();
		},
		onPullDownRefresh() {
			this.finished = false;
			this.pageNo = 1;
			this.list = [];
			this.getlist();
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		width: 100%;
		background-color: #f1efef;

		.doctorlist {
			.list {
				background-color: #ffffff;
			}

			.item:nth-last-child(1) {
				border: none;
			}
		}


		.hospitalList {

			.item {
				padding: 30rpx;
				border-bottom: 1rpx solid #F1F1F1;
				background-color: #ffffff;

				div:nth-child(1) {
					span {
						margin-right: 10rpx;
						display: inline-block;
					}

					span:nth-child(1) {
						font-size: 30rpx;
					}

					span:nth-child(2) {
						font-size: 22rpx;
						background: linear-gradient(#f5a91d 0%, #f4a200 53%, #f7c372 100%);
						color: #ffffff;
						border-radius: 4rpx;
						padding: 5rpx 10rpx;
					}

					span:nth-child(3) {
						font-size: 22rpx;
						background-color: #47ABF7;
						color: #ffffff;
						border-radius: 4rpx;
						padding: 5rpx 10rpx;
					}
				}

				div:nth-child(2) {
					margin: 10rpx 0rpx;
					color: #ababab;
					font-size: 22rpx;
				}

				div:nth-child(3) {
					display: flex;
					align-items: center;

					p:nth-child(1) {
						padding: 8rpx 10rpx;
						color: #edb344;
						font-size: 20rpx;
						margin-right: 10rpx;
						border: 1rpx solid #e9c278;
						border-radius: 4rpx;
						background-color: #ffffff;
					}

					p:nth-child(2) {
						padding: 8rpx 10rpx;
						color: #dd1d1a;
						font-size: 20rpx;
						margin-right: 10rpx;
						border: 1rpx solid #dd1d1a;
						border-radius: 4rpx;
						background-color: #ffffff;
					}
				}
			}
		}
	}
</style>